<template>
  <div class="page-box">
    <Page :current="page.pageIndex + 1"
          :total="pageTotal"
          :page-size="page.pageSize"
          @on-change="handleChange"
          show-total />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: "page",
    data () {
      return {
        pageInit: {
          pageIndex: 0,
          pageSize: 20
        }
      }
    },
    props: ['pageTotal'],
    mounted () {
      this.setPageNum()
    },
    methods: {
      setPageNum () {
        this.$store.commit('SET_PAGE', this.pageInit)
      },
      handleChange (val) {
        this.pageInit.pageIndex = val - 1
        this.$store.commit('SET_PAGE', this.pageInit)
        this.$emit('getList');
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .page {
  }
</style>
